<template>

		<view class="area-b-item" @longpress="pressItem(person)">
			<view class="avatar-box">
				<view class="avatar-container">
					<img v-if="person.friendDetail.nicPic&&Object.keys(person.friendDetail.nicPic).length " class="user-avatar" :src="person.friendDetail.nicPic.url" alt="" />
					<view v-else class="fallback-avatar">
						<avatar-fallback :name="person.remarkName ||person.friendDetail.nicName||'未知'" :size="40" text-color="#fff"></avatar-fallback>
					</view>
				</view>
			</view>
			<view class="name-box">
				<view class="name-text">{{ person.remarkName||person.friendDetail.nicName }}</view>
				<view class="signature-text">{{ person.signature || '暂无签名' }}</view>
				<view class="phone-text">{{ person.friendUserTel || '未设置手机号' }}</view>
			</view>
			<view class="right-box">
				<uni-icons type="right" size="24" color="#ccc"></uni-icons>
			</view>
		</view>

</template>

<script>
import AvatarFallback from '@/components/AvatarFallback.vue';
export default {
	name: 'person',
	props: {
		person: {
			type: Object,
			default: () => ({})
		}
	},
	components: {
		AvatarFallback
	},

	data() {
		return {
			
			
		};
	},
	methods:{
		pressItem(person){
			console.log(person);
		this.$emit('pressItem',{type:'person',data:person})
				
		}
	}
	
};
</script>

<style lang="scss" scoped>

  .area-b-item {
	    width: 700rpx;
		display: flex;
		margin-bottom: 5rpx;
		align-items: center;
		border-radius: 16rpx;
		background-color: #ffffff;
		padding: 10rpx 15rpx;
		min-height: 100rpx;
		border-bottom: 1px solid #ffffff;
		&:last-child {
			border-bottom: none;
		}
		.avatar-box {
			width: 60rpx;
			height: 60rpx;
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.avatar-container,
		.fallback-avatar,
		.user-avatar {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
		}
		.name-box {
			flex-grow: 1;
			margin-left: 40rpx;
			min-width: 0;
			.name-text {
				font-size: 30rpx;
				color: #333;
		/* #ifndef APP-PLUS-NVUE */
			white-space: nowrap;
		/* #endif */
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.signature-text {
				
								color: #999;
								/* #ifndef APP-PLUS-NVUE */
					white-space: nowrap;
				/* #endif */
				overflow: hidden;
				text-overflow: ellipsis;
				margin-top: 5rpx;
			}
			.phone-text {
				font-size: 22rpx;
				color: #ccc;
					/* #ifndef APP-PLUS-NVUE */
		white-space: nowrap;
	/* #endif */
				overflow: hidden;
				text-overflow: ellipsis;
				margin-top: 3rpx;
			}
		}
		.right-box {
			flex-shrink: 0;
			width: 60rpx;
			display: flex;
			align-items: flex-end;
			align-items: center;
			justify-content: center;
			color: #999;
		}

}
</style>
